﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="FinanceAdviser.GroupedItemsPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FinanceAdviser"
    xmlns:data="using:FinanceAdviser.Data"
    xmlns:common="using:FinanceAdviser.Common"
    xmlns:tiles="using:FinanceAdviser.VariableTemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="TopApp" Padding="10,0,10,0" MinHeight="110" Background="#F9161616" BorderBrush="#F9161616">
            <Grid Height="100" Margin="10,0,0,0">
                <StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                    <Button x:Name="btnHome" Tag="Home" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Center" Padding="0" Style="{StaticResource TopAppbarBtnStyle}"  >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="93" Margin="0" Width="93" Background="#19259511">
                            <Image Source="Assets/AppBar/TopAppBar1.png" Margin="0"/>
                        </Grid>
                    </Button>
                    <Button x:Name="btnPortfolio" Tag="Portfolio" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Center" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0"  >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="93" Margin="0" Width="93" Background="#19259511">
                            <Image Source="Assets/AppBar/TopAppBar2.png" Margin="0"/>
                        </Grid>
                    </Button>
                    <Button x:Name="btnMyGoals" Tag="My Goals" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Center" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0"  >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="93" Margin="0" Width="93" Background="#19259511">
                            <Image Source="Assets/AppBar/TopAppBar3.png" Margin="0"/>
                        </Grid>
                    </Button>
                    <Button x:Name="btnEquityTracker" Tag="Equity tracker" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Center" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0"  >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="93" Margin="0" Width="93" Background="#19259511">
                            <Image Source="Assets/AppBar/TopAppBar4.png" Margin="0"/>
                        </Grid>
                    </Button>
                    <Button x:Name="btnLoanCalculator" Tag="Loan Calculator" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Center" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0"  >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="93" Margin="0" Width="93" Background="#19259511">
                            <Image Source="Assets/AppBar/TopAppBar5.png" Margin="0"/>
                        </Grid>
                    </Button>
                    <Button x:Name="btnMyAccounts" Tag="MyAccounts" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Center" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0"  >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="93" Margin="0" Width="93" Background="#19259511">
                            <Image Source="Assets/AppBar/TopAppBar6.png" Margin="0"/>
                        </Grid>
                    </Button>
                    <Button x:Name="btnFixedDeposits" Tag="Fixed Deposits" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Center" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0"  >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="93" Margin="0" Width="93" Background="#19259511">
                            <Image Source="Assets/AppBar/TopAppBar7.png" Margin="0"/>
                        </Grid>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="Items"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

        <tiles:VariableTiles x:Key="MyTemplateSelectorObj" 
                             
                             RedTemplate="{StaticResource RedItemTemplate}"
                             GreenTemplate="{StaticResource GreenItemTemplate}"
                             WhiteTemplate="{StaticResource WhiteItemTemplate}"
                             NormalTemplate="{StaticResource NormalItemTemplate}"
                             FixedDepositTemplate="{StaticResource FixedDepositItemTemplate}">


        </tiles:VariableTiles>

    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF0A2C4E"/>
                <GradientStop Color="#FF191919" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Horizontal scrolling grid used in most view states -->

        <!-- Vertical scrolling list only used when snapped -->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Grouped Items"
            Grid.Row="1"
            Visibility="Collapsed"
            Margin="0,-10,0,0"
            Padding="10,0,0,60"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource RedItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                <Button
                                    AutomationProperties.Name="Group Title"
                                    Click="Header_Click"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Text="Your app slogan goes here" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" />
            <Image x:Name="image" HorizontalAlignment="Right" Width="212" Source="Assets/Logo.png" Margin="0,0,20,0" Grid.Column="1" VerticalAlignment="Center"/>
        </Grid>
        <ScrollViewer x:Name="scrollViewer" Grid.Row="1" Style="{StaticResource HorizontalScrollViewerStyle}" Margin="0,-30,0,0">
            <Grid x:Name="grid" Margin="122,0,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="390"/>
                    <ColumnDefinition Width="90"/>
                    <ColumnDefinition Width="615"/>
                    <ColumnDefinition Width="90"/>
                    <ColumnDefinition Width="565"/>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="215"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Mutual Fund Portfolio" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="32" FontWeight="Light"/>
                <tiles:VariableTileControl
        			x:Name="itemGridView"
        			AutomationProperties.AutomationId="ItemGridView"
        			AutomationProperties.Name="Grouped Items"
        			Margin="0,8,0,0"
        			Padding="120,8,40,20"
        			ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        			ItemTemplateSelector="{StaticResource MyTemplateSelectorObj}"
        			SelectionMode="None"
        			IsItemClickEnabled="True"
        			ItemClick="ItemView_ItemClick" HorizontalContentAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Grid.Column="7" Grid.RowSpan="2">

                    <tiles:VariableTileControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal" Margin="1,0,60,0"/>
                        </ItemsPanelTemplate>
                    </tiles:VariableTileControl.ItemsPanel>
                    <tiles:VariableTileControl.GroupStyle>
                        <GroupStyle >
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="1,0,0,6" Orientation="Horizontal">
                                        <Button
                                    AutomationProperties.Name="Group Title"
                                    Click="Header_Click"
                                    Style="{StaticResource TextPrimaryButtonStyle}" >
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                                <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                            </StackPanel>
                                        </Button>
                                    </StackPanel>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" MaximumRowsOrColumns="110" Orientation="Vertical" Margin="0,0,80,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </tiles:VariableTileControl.GroupStyle>
                </tiles:VariableTileControl>

                <StackPanel Grid.Row="1" Grid.RowSpan="2" >
                    <Grid x:Name="grd_FundSummary" Height="260" Background="#FFE0E3E7">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="55"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="60"/>
                        </Grid.RowDefinitions>
                        <StackPanel Margin="20,0,0,0" Orientation="Vertical" VerticalAlignment="Center">
                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet..." VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" Foreground="#FF168E00"/>
                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Investment v/s Returns" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="12" Foreground="#FF636363"/>
                        </StackPanel>
                        <Image Grid.Row="1" Source="Assets/HubPageImages/HubPagechart1.png"/>
                        <Rectangle Fill="#72151515" Height="1" Grid.RowSpan="2" VerticalAlignment="Top" StrokeThickness="0" Grid.Row="2" Margin="30,0"/>
                        <Grid Margin="0" Grid.Row="3" >
                            <StackPanel Margin="30,0,0,0" VerticalAlignment="Center">
                                <TextBlock TextWrapping="Wrap" Text="Current Value" Foreground="#FF00A024" FontSize="12" FontFamily="Segoe UI"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock TextWrapping="Wrap" Text="Rs. " Foreground="#FF575757" FontSize="24" FontFamily="Segoe UI" FontWeight="Bold"/>
                                    <TextBlock TextWrapping="Wrap" Text="8,23,000" Foreground="#FF575757" FontSize="24" FontFamily="Segoe UI" FontWeight="Bold" Margin="3,0,0,0"/>
                                </StackPanel>
                            </StackPanel>
                            <StackPanel HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Center">
                                <TextBlock TextWrapping="Wrap" Text="Total Investments" Foreground="#FF00A024" FontSize="12" FontFamily="Segoe UI"/>
                                <StackPanel Orientation="Horizontal" Width="136">
                                    <TextBlock TextWrapping="Wrap" Text="Rs. " Foreground="#FF575757" FontSize="24" FontFamily="Segoe UI" FontWeight="Bold"/>
                                    <TextBlock TextWrapping="Wrap" Text="8,89,300" Foreground="#FF575757" FontSize="24" FontFamily="Segoe UI" FontWeight="Bold" Margin="3,0,0,0"/>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </Grid>
                    <Grid x:Name="grd_FundSummary_Copy" Height="260" Background="#FFE0E3E7" Margin="0,10,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="55"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="60"/>
                        </Grid.RowDefinitions>
                        <StackPanel Margin="20,0,0,0" Orientation="Vertical" VerticalAlignment="Center">
                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="My Total Financial Summary" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" Foreground="#FF168E00"/>
                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Investment v/s Returns" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="12" Foreground="#FF636363"/>
                        </StackPanel>
                        <Image Grid.Row="1" Source="Assets/HubPageImages/HubPagechart1.png"/>
                        <Rectangle Height="1" Grid.RowSpan="2" VerticalAlignment="Top" StrokeThickness="0" Grid.Row="2" Margin="30,0" Fill="#72151515"/>
                        <Grid Margin="0" Grid.Row="3" >
                            <StackPanel Margin="30,0,0,0" VerticalAlignment="Center">
                                <TextBlock TextWrapping="Wrap" Text="Current Value" FontSize="12" FontFamily="Segoe UI" Foreground="#FF00A024"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock TextWrapping="Wrap" Text="Rs." FontSize="24" FontFamily="Segoe UI" FontWeight="Bold" Foreground="#FF575757"/>
                                    <TextBlock TextWrapping="Wrap" Text="9,00,000" FontSize="24" FontFamily="Segoe UI" FontWeight="Bold" Foreground="#FF575757" Margin="3,0,0,0"/>
                                </StackPanel>
                            </StackPanel>
                            <StackPanel HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Center">
                                <TextBlock TextWrapping="Wrap" Text="Total Investments" Foreground="#FF00A024" FontSize="12" FontFamily="Segoe UI"/>
                                <StackPanel Orientation="Horizontal" Width="149">
                                    <TextBlock TextWrapping="Wrap" Text="Rs. " Foreground="#FF575757" FontSize="24" FontFamily="Segoe UI" FontWeight="Bold"/>
                                    <TextBlock TextWrapping="Wrap" Text="10,29,000" Foreground="#FF575757" FontSize="24" FontFamily="Segoe UI" FontWeight="Bold" Margin="3,0,0,0"/>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </StackPanel>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="My Goals" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="32" FontWeight="Light" Margin="0" Grid.Column="2"/>
                <Grid Grid.Row="1" Grid.Column="2" Height="528" VerticalAlignment="Top" Background="#FFE0E3E7">
                    <StackPanel Margin="20">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="SIP Calculator" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" Foreground="#FF168E00"/>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Set your goal amount" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="12" Foreground="#FF575757"/>
                        <Slider Style="{StaticResource SIPCalculatorSliderStyle}" Foreground="#FFF0F0F0" LargeChange="0" Maximum="45" Width="575" Value="22" Margin="0,20,0,0"/>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="12" Foreground="#FF464646" Margin="0,30,0,0"/>
                        <Grid Margin="0,30,0,0" Height="278">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="50*"/>
                                <ColumnDefinition Width="50*"/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/HubPageImages/HubPagechart3.png" Width="235" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <StackPanel Grid.Column="1" Margin="0" Orientation="Vertical" VerticalAlignment="Center">
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin volutpat turpis, ac molestie nisl eleifend in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec arcu lorem, dapibus vitae pulvinar a, pellentesque eget erat. " VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="12" Foreground="#FF464646" Margin="0"/>
                                <StackPanel Margin="0,20,0,0" Orientation="Horizontal">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Rs. " VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="32" Foreground="#FF464646" FontWeight="Light"/>
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="1,00,560" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="32" Foreground="#FF464646" FontWeight="Light" Margin="10,0,0,0"/>

                                </StackPanel>

                            </StackPanel>

                        </Grid>
                    </StackPanel>
                </Grid>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Loan Calculator" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="32" FontWeight="Light" Margin="0" Grid.Column="4"/>
                <Grid x:Name="grdLoanCalculator" VerticalAlignment="Top" Height="528" Grid.Row="1" Grid.Column="4" Background="#D8FFFFFF">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="40,40,20,0">
                        <StackPanel Margin="0,20,0,0">
                            <TextBlock TextWrapping="Wrap" Text="75" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,47"/>
                            <TextBlock TextWrapping="Wrap" Text="65" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,47"/>
                            <TextBlock TextWrapping="Wrap" Text="55" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,47"/>
                            <TextBlock TextWrapping="Wrap" Text="45" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,47"/>
                            <TextBlock TextWrapping="Wrap" Text="35" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,47"/>
                            <TextBlock TextWrapping="Wrap" Text="25" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,26"/>
                            <TextBlock TextWrapping="Wrap" Text="18" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0"/>
                        </StackPanel>
                        <StackPanel Orientation="Vertical">
                            <Slider Orientation="Vertical" Background="#27FFFFFF" Style="{StaticResource AgeSliderStyle}" Value="25" Height="385" Maximum="75" Minimum="18"/>
                            <TextBlock TextWrapping="Wrap" Text="My Age" Foreground="#FF3B3B3B" FontFamily="Segoe UI" FontSize="14.667" FontWeight="Bold" Margin="0,30,0,0"/>
                        </StackPanel>
                        <StackPanel Margin="60,20,0,0">
                            <TextBlock TextWrapping="Wrap" Text="1.75L" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,38"/>
                            <TextBlock TextWrapping="Wrap" Text="1.5L" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,38"/>
                            <TextBlock TextWrapping="Wrap" Text="1.25L" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,38"/>
                            <TextBlock TextWrapping="Wrap" Text="1L" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,38"/>
                            <TextBlock TextWrapping="Wrap" Text="75k" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,38"/>
                            <TextBlock TextWrapping="Wrap" Text="50k" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,38"/>
                            <TextBlock TextWrapping="Wrap" Text="25k" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0,0,0,20"/>
                            <TextBlock TextWrapping="Wrap" Text="10k" FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" Foreground="#FF3B3B3B" Margin="0"/>
                        </StackPanel>
                        <StackPanel Orientation="Vertical">
                            <Slider Orientation="Vertical" Background="#27FFFFFF" Style="{StaticResource IncomeSliderStyle}" Value="25" Height="385" Maximum="175" Minimum="10"/>
                            <TextBlock TextWrapping="Wrap" Text="Current Income" Foreground="#FF3B3B3B" FontFamily="Segoe UI" FontSize="14.667" FontWeight="Bold" Margin="0,30,0,0"/>
                        </StackPanel>
                        <StackPanel Margin="50,0,0,0" VerticalAlignment="Center">
                            <Grid Height="40" Width="127">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="67"/>
                                    <ColumnDefinition Width="30*"/>
                                </Grid.ColumnDefinitions>
                                <Button x:Name="btnPlus" Content="+" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="#FF0080D5" BorderThickness="0" Padding="0" FontSize="29.333" Style="{StaticResource PlusButtonStyle}"/>
                                <Button x:Name="btnPlus_Copy" Content="-" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="#FF0080D5" BorderThickness="0" Padding="0" FontSize="29.333" Style="{StaticResource PlusButtonStyle}" Grid.Column="2"/>
                                <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="07.5" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="32" FontWeight="Light" Grid.Column="1" Foreground="#FF3B3B3B"/>
                            </Grid>
                            <TextBlock TextWrapping="Wrap" Text="Rate of Interest" FontFamily="Segoe UI" FontSize="14.667" Foreground="#FF3B3B3B" Margin="0,5,0,0"/>
                            <Grid Height="40" Width="127" Margin="0,100,0,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="67"/>
                                    <ColumnDefinition Width="30*"/>
                                </Grid.ColumnDefinitions>
                                <Button x:Name="btnPlus1" Content="+" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="#FF0080D5" BorderThickness="0" Padding="0" FontSize="29.333" Style="{StaticResource PlusButtonStyle}"/>
                                <Button x:Name="btnPlus_Copy1" Content="-" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="#FF0080D5" BorderThickness="0" Padding="0" FontSize="29.333" Style="{StaticResource PlusButtonStyle}" Grid.Column="2"/>
                                <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="12.5" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="32" FontWeight="Light" Grid.Column="1" Foreground="#FF3B3B3B"/>
                            </Grid>
                            <TextBlock TextWrapping="Wrap" Text="Rate of Inflation" FontFamily="Segoe UI" FontSize="14.667" Foreground="#FF3B3B3B" Margin="0,5,0,0"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
                <Grid Background="#D8FFFFFF" Grid.Row="1" Grid.Column="6" Height="528" VerticalAlignment="Top">
                    <StackPanel Margin="15,0,0,0">
                        <TextBlock TextWrapping="Wrap" Text="Loan Eligibility" FontFamily="Segoe UI" FontSize="18.667" Foreground="#FF2B2B2B" FontWeight="Bold"/>
                        <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
                            <TextBlock TextWrapping="Wrap" Text="Rs. " FontFamily="Segoe UI" FontSize="29.333" Foreground="#FF2B2B2B" FontWeight="Light"/>
                            <TextBlock TextWrapping="Wrap" Text="24,32,000" FontFamily="Segoe UI" FontSize="29.333" Foreground="#FF2B2B2B" FontWeight="Light" Width="185" Margin="5,0,0,0"/>
                        </StackPanel>
                        <TextBlock TextWrapping="Wrap" Text="for 20 years" FontFamily="Segoe UI" FontSize="13.333" Foreground="#FF919191"/>
                    </StackPanel>
                    <Button Content="Get Details" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="105" Style="{StaticResource PlusButtonStyle}" Background="#FF1D9B2A" BorderBrush="{x:Null}" BorderThickness="0" FontSize="18.667"/>
                </Grid>
            </Grid>
        </ScrollViewer>
        <ScrollViewer x:Name="scvSnaped" Grid.Row="1" Style="{StaticResource VerticalScrollViewerStyle}" Visibility="Collapsed">
            <Grid HorizontalAlignment="Center" Margin="1,0,0,0">
                <tiles:VariableTileControl
		 			x:Name="itemGridView2"
		 			AutomationProperties.AutomationId="ItemGridView"
		 			AutomationProperties.Name="Grouped Items"
		 			Margin="0"
		 			Padding="0"
		 			ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
		 			ItemTemplateSelector="{StaticResource MyTemplateSelectorObj}"
		 			SelectionMode="None"
		 			IsItemClickEnabled="True"
		 			ItemClick="ItemView_ItemClick" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" Visibility="Collapsed" HorizontalAlignment="Center" Background="#00000000">

                    <tiles:VariableTileControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical" Margin="10,0,0,0"/>
                        </ItemsPanelTemplate>
                    </tiles:VariableTileControl.ItemsPanel>
                    <tiles:VariableTileControl.GroupStyle>
                        <GroupStyle >
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="1,0,0,6" Orientation="Vertical">
                                        <!--<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="10,0,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="#FFFFFFFF" FontSize="32"/>
                                        <TextBlock x:Name="txtVideo" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="140,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubTl}"/>
                                        <TextBlock x:Name="txtPicture" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub2}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="275,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubT2}"/>-->

                                        <Button
		 									AutomationProperties.Name="Group Title"
		 									Content="{Binding Title}"
		 									
		 									Style="{StaticResource TextButtonStyle}"  Foreground="#FFFFFFFF" FontFamily="Segoe UI" FontSize="32" FontWeight="Light" Background="#FFD71921"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" MaximumRowsOrColumns="110" Orientation="Horizontal" Margin="0,0,0,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </tiles:VariableTileControl.GroupStyle>
                </tiles:VariableTileControl>
            </Grid>
        </ScrollViewer>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>96,0,10,56</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>115,0,0,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.UseLayoutRounding)" Storyboard.TargetName="itemGridView">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Boolean>False</x:Boolean>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="TopApp">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="itemGridView2">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scvSnaped">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
